<template>
  <div>
    <el-button type="primary" icon="search" @click="loginBatch"
      >批量登录</el-button
    >

    <br />
    <br />

    <input type="text" v-model="longitude" name="" id="" />

    <br />
    <br />

    <input type="text" v-model="latitude" name="" id="" />
    <br />
    <br />

    <div style="height: 500px" id="container"></div>
  </div>
</template>

<script>
import user from '@/api/user';
export default {
  name: 'functionality',
  methods: {
    loginBatch() {
      user
        .loginBatch()
        .then((res) => {
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    change() {
      let longitude = this.longitude;
      let latitude = this.latitude;

      var map = new BMapGL.Map('container');
      map.centerAndZoom(new BMapGL.Point(longitude, latitude), 18);
      // 创建地理编码实例
      var myGeo = new BMapGL.Geocoder();
      // 根据坐标得到地址描述
      myGeo.getLocation(
        new BMapGL.Point(longitude, latitude),
        function (result) {
          if (result) {
            // alert(result.address);
            console.log(result);
          }
        }
      );
      map.enableScrollWheelZoom(); // 启动鼠标滚轮操作

      var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
      map.addControl(scaleCtrl);
      var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
      map.addControl(zoomCtrl);
      var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
      map.addControl(cityCtrl);

      var point = new BMapGL.Point(longitude, latitude);
      var marker = new BMapGL.Marker(point); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中
    },
  },
  data() {
    return {
      // longitude: '116.29063210767256',
      // latitude: '39.82535609344802',
      // longitude: '116.297',
      // latitude: '39.832',
      longitude: '116.290761',
      latitude: '39.826009',
    };
  },
  watch: {
    longitude(val) {
      this.change();
    },
    latitude(val) {
      this.change();
    },
  },
  mounted() {
    let longitude = this.longitude;
    let latitude = this.latitude;

    var map = new BMapGL.Map('container');
    map.centerAndZoom(new BMapGL.Point(longitude, latitude), 18);
    // 创建地理编码实例
    var myGeo = new BMapGL.Geocoder();
    // 根据坐标得到地址描述
    myGeo.getLocation(new BMapGL.Point(longitude, latitude), function (result) {
      if (result) {
        // alert(result.address);
        console.log(result);
      }
    });
    map.enableScrollWheelZoom(); // 启动鼠标滚轮操作

    var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
    map.addControl(cityCtrl);

    var point = new BMapGL.Point(longitude, latitude);
    var marker = new BMapGL.Marker(point); // 创建标注
    map.addOverlay(marker); // 将标注添加到地图中

    // var map = new BMapGL.Map('container');
    // map.centerAndZoom(new BMapGL.Point(116.331398, 39.897445), 13);
    // var geoc = new BMapGL.Geocoder();
    // map.addEventListener('click', function (e) {
    //   var pt = e.latlng;
    //   geoc.getLocation(pt, function (rs) {
    //     var addComp = rs.addressComponents;
    //     alert(
    //       addComp.province +
    //         ', ' +
    //         addComp.city +
    //         ', ' +
    //         addComp.district +
    //         ', ' +
    //         addComp.street +
    //         ', ' +
    //         addComp.streetNumber
    //     );
    //   });
    // });
  },
};
</script>

<style scope>
#container {
  height: 100%;
}
</style>
